<template>
  <Teleport to="body">
    <div class="wallet-kit-modal" v-if="openModal">
      <div class="wallet-kit-mask"></div>
      <div
        class="wallet-kit-modal-wrapper"
        :style="{
          animationPlayState: playState,
        }"
        v-bind="$attrs"
      >
        <slot></slot>
      </div>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    show: boolean
  }>(),
  {
    show: false,
  },
)

const openModal = ref(false)
const playState = ref('running')

function disableScroll() {
  // 保存当前滚动位置
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  document.body.style.position = 'fixed'
  document.body.style.top = `-${scrollTop}px`
  document.body.style.width = '100%'
}

function enableScroll() {
  const scrollTop = parseInt(document.body.style.top || '0')
  document.body.style.position = ''
  document.body.style.top = ''
  window.scrollTo(0, -scrollTop)
}

onMounted(() => {
  watch(
    [() => props.show],
    () => {
      playState.value = 'running'
      setTimeout(() => {
        playState.value = 'paused'
      }, 350)
      if (props.show) {
        openModal.value = true
      } else {
        setTimeout(() => {
          openModal.value = false
        }, 350)
      }

      if (props.show) {
        disableScroll()
      } else {
        enableScroll()
      }
    },
    {
      immediate: true,
    },
  )
})

defineOptions({
  inheritAttrs: false,
})
</script>

<style lang="scss" scoped>
button {
  cursor: pointer;
  padding: 4px 12px;
  transition: all 0.3s ease;
  border: none;
  background: #d9fc01;
  color: #1a1b1f;
  border-radius: 24px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -0.05em;
  line-height: 16px;
  &:hover {
    transform: scale(1.05);
  }
  &:active {
    transform: scale(0.95);
  }
}
.wallet-kit-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  animation: opacity 0.15s ease;
}
.wallet-kit-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}
.wallet-kit-modal-wrapper {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -200px;
  left: -200px;
  padding: 200px;
  right: -200px;
  top: -200px;
  transform: translateZ(0);
  z-index: 1000;

  animation:
    translate 0.35s cubic-bezier(0.15, 1.15, 0.6, 1) infinite alternate,
    opacity 0.2s ease;
}

@keyframes translate {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
